<script setup>

import api from "@/api/index.js";


const tableData = reactive({
  list: []
})

onMounted(() => {
  api.getart({
    params: {
      page: 1
    }
  }).then(
      res => {
        tableData.list = res.data.data

        console.log(tableData.list)

      }
  )
})

</script>

<template>
  <div v-if="tableData.list.length<1" v-loading="true"></div>


  <div v-else class="without-outline">
    <el-table :cell-style="{ background: '#FBFBFC', color: '#606266'  }"
              :data="tableData.list"
              :header-cell-style="{ background: 'rgba(238, 238, 245, 0.5)', color: '#1d1d1e'  }"
              cell-class-name="table"

              style="width: 100%">
      <el-table-column label="id" prop="id" width="100"/>
      <el-table-column label="标题" prop="title" width="100"/>
      <el-table-column label="分类" prop="sort-id" width="100"/>
      <el-table-column label="描述" prop="desc" show-overflow-tooltip width="280"/>

      <el-table-column label="发布" prop="open" width="100">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <!--            通过判断复制类型-->
            <el-tag :type="scope.row.open===1?'':'warning'">{{ scope.row.open === 1 ? '发布' : '草稿' }}</el-tag>
          </div>
        </template>
      </el-table-column>


      <el-table-column label="创建时间" prop="create" width="200"/>
      <el-table-column label="更新时间" prop="update"/>
    </el-table>
  </div>


</template>

<style scoped>
.without-outline:focus {
  outline: none;
  height: 10px;
}
</style>